<template>
    <div class="gzzs">
        <img
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/fldy-banner.png"
            class="banner"
            alt=""
        />
        <div class="text1">
            北京尚公律师事务所始创于1996年5月，是国内最早设立的大
            型综合性律师事务所之一，尚公所现有执业律师和相关专业人
            员一千余名，分别专精于特定的法律专业领域。
            <br />北京尚公(合肥)律师事务所是“安徽省省直单位法律咨询定点
            单位”，被确定为中标供应商:律师受聘为合肥市人民政府法律
            顾问、合肥仲裁委员会仲裁员、蜀山区国动委法律专业人才资
            源库、安徽省人民检察院人民监督员、合肥市公共资源交易管
            理局(招投标中心)专家库成员(法律)。
        </div>
        <div class="box">
            <div class="title">预约时间:</div>
            <div class="zxzx">
                <div class="time">上午9:00-12:00</div>
                <div class="time" style="width: 100%">下午14:00-18:00</div>
                <div class="but" @click="zxzx">在线咨询</div>
            </div>
            <div class="zxzx">
                <div class="num">
                    可用次数：{{
                        userInfo && userInfo.seek_num ? userInfo.seek_num : "0"
                    }}/3
                </div>
                <div class="min-text" style="width: 100%">
                    <i class="el-icon-warning-outline"></i
                    >每用户每年有三次免费答疑次数，每次时长三十分钟，可电话/微信。
                </div>
                <div class="but" @click="zlls()">直联律师</div>
            </div>
            <div class="text2">*须知:联系律师的时候说明是小竹财税平台用户</div>
        </div>
        <el-dialog
            title=""
            :visible.sync="dialogTableVisible"
            width="416px"
            :show-close="false"
            top="30vh"
        >
            <div class="dialog1">
                <img
                    src="~/assets/images/wx-kefu-code.png"
                    class="img"
                    alt="客服"
                />
                <div class="right">
                    注:添加律师助理后，助理随后会帮助联系合适的律师为您答疑
                    <div class="but" @click="dialogTableVisible = false">
                        关闭
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            title=""
            :visible.sync="dialogTableVisible2"
            width="425px"
            :show-close="false"
            top="30vh"
        >
            <div class="dialog2">
                <img
                    src="~/assets/images/wx-lvshi-code.png"
                    class="img"
                    alt=""
                />
                <div class="info">
                    <div class="title">联系电话：</div>
                    <div class="phone">17344072578</div>
                    <div class="tips">
                        注:请联系律师的时候说明是小竹财税平台用户请工作时间联系律师;
                    </div>
                </div>
                <div class="but closebut" @click="dialogTableVisible2 = false">
                    关闭
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { seek_ask } from "@/assets/api/userCenterApi.js";
export default {
    async asyncData({ params }) {
        let data = {};
        return data;
    },
    layout: "home",
    head() {
        return {
            title: "会计知识专业问答-财税会计知识问答-小竹财税官网",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    components: {},
    data() {
        return {
            dialogTableVisible: false,
            dialogTableVisible2: false,
        };
    },
    beforeMount() {},
    created() {},
    mounted() {},
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    methods: {
        ...mapActions("common", ["getUserInfo"]),
        async zlls() {
            if (!this.userInfo) {
                this.$router.push({
                    path: "/login",
                });
                return;
            }
            if (this.userInfo && this.userInfo.seek_num > 0) {
                const res = await seek_ask({});
                if (res.code == 1) {
                    this.getUserInfo();
                    this.dialogTableVisible2 = true;
                }
            } else {
                this.$message({
                    message: "当前无咨询次数",
                    type: "warning",
                });
            }
        },

        async zxzx() {
            if (!this.userInfo) {
                this.$router.push({
                    path: "/login",
                });
                return;
            }
            if (this.userInfo && this.userInfo.seek_num > 0) {
                const res = await seek_ask({});
                if (res.code == 1) {
                    this.getUserInfo();
                    this.dialogTableVisible = true;
                }
            } else {
                this.$message({
                    message: "当前无咨询次数",
                    type: "warning",
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.gzzs {
    width: 1200px;
    margin: 30px auto;
}

.banner {
    height: auto;
    width: 100%;
    display: block;
}

.text1 {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    line-height: 39px;
    padding: 20px 12px;
}

.box {
    padding: 20px 40px 40px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    .title {
        font-weight: 700;
        font-size: 22px;
        color: #333333;
    }

    .zxzx {
        padding-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
            min-width: 180px;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
        }
        .num {
            min-width: 180px;
            font-weight: 700;
            font-size: 22px;
            color: #333333;
        }
        .min-text {
            font-weight: 350;
            font-size: 12px;
            color: #333333;
            width: 100%;
            i {
                padding-right: 5px;
            }
        }
        .but {
            width: 147px;
            min-width: 147px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            background: #007ce2;
            border-radius: 8px;
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
        }
    }
    .text2 {
        text-align: right;
        font-weight: 350;
        font-size: 16px;
        color: #d9001b;
        padding-top: 20px;
    }
}

.but {
    cursor: pointer;
    user-select: none;
    &:hover {
        opacity: 0.9;
    }
    &:active {
        opacity: 0.8;
    }
}

.dialog1 {
    display: flex;
    justify-content: space-between;
    .img {
        width: 130px;
        min-width: 130px;
        height: 130px;
        background: #d8d8d8;
    }
    .right {
        padding-left: 28px;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        .but {
            margin-top: 60px;
            margin-left: 117px;
            width: 96px;
            height: 36px;
            background: #007ce2;
            border-radius: 8px;
            line-height: 36px;
            text-align: center;
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
        }
    }
}

.dialog2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom: 20px;
    .img {
        width: 108px;
        height: 108px;
        min-width: 108px;
    }
    .info {
        width: 251px;
        .title {
            font-weight: 500;
            font-size: 20px;
            color: #333333;
        }
        .phone {
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            padding: 4px 0;
        }
        .tips {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            line-height: 24px;
        }
    }
    .closebut {
        position: absolute;
        right: 4px;
        bottom: -19px;
        width: 96px;
        height: 36px;
        background: #007ce2;
        border-radius: 8px;
        line-height: 36px;
        text-align: center;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
    }
}

::v-deep .el-dialog__header {
    padding: 0;
}
</style>